@require('./variables.styl')
sizes = large small mini

.k-tabs
    border-bottom $tabs-border
    position relative
    line-height 1
    .k-tab
        if $tabs-height != auto
            height $tabs-height 
            line-height s('calc(%s - 2px)', @height)
        padding $tabs-padding 
        margin $tabs-margin 
        cursor pointer
        display inline-block
        text-align center
        color $tabs-color 
        position relative
        vertical-align middle
        // disabled
        &.k-disabled
            color $disabled-color
            cursor not-allowed
        // close
        .k-close
            margin-right unit(-($mini-height / 2 / 14), rem)
            margin-left -(@margin-right)
            position relative
            top -2px
            .k-icon
                font-size $tabs-close-font-size
        &:hover
        &.k-active
            color $tabs-active-color 
            
    // active-bar
    .k-active-bar
        transition all $transition
        position absolute
        left 0
        height $tabs-highlight-height 
        background $tabs-highlight-bg-color 
        bottom $tabs-highlight-bottom 

    // vertical
    &.k-vertical
        display inline-block
        border-bottom none
        border-right $tabs-border
        .k-tab
            display block
            margin 0
            padding $tabs-vertical-padding
        // active-bar
        .k-active-bar
            left auto
            top 0
            right $tabs-highlight-bottom 
            width $tabs-highlight-height
            height auto

    // card
    &.k-card
        .k-tab
            margin 0
            border $tabs-border-width solid #fff
            border-width $tabs-border-width $tabs-border-width 0 $tabs-border-width
            margin-left -($tabs-border-width)
            &:first-of-type
                margin-left 0
            &.k-active
                border-color $tabs-border-color 
                z-index 1
                &:after
                &:before
                    content ""
                    display block
                    position absolute
                &:after
                    height $tabs-border-width
                    background #fff
                    bottom -($tabs-border-width)
                    left 0
                    width 100%
                &:before
                    height $tabs-highlight-height
                    background $primary-color
                    top -($tabs-border-width)
                    left -($tabs-border-width)
                    right -($tabs-border-width)
        // vertical card
        &.k-vertical
            .k-tab
                border-width $tabs-border-width 0 $tabs-border-width $tabs-border-width
                margin-top -($tabs-border-width)
                &:first-of-type
                    margin-top 0
                &.k-active
                    &:after
                        left auto
                        right -($tabs-border-width)
                        width $tabs-border-width
                        top 0
                        bottom 0
                        height auto
                    &:before
                        height auto
                        top -($tabs-border-width)
                        bottom -($tabs-border-width)
                        left -($tabs-border-width)
                        right auto
                        width $tabs-highlight-height

    // border-card
    &.k-border-card
        border $tabs-border
        border-bottom none
        background $tabs-border-card-bg-color
        .k-tab
            margin 0
            &.k-active
                background #fff
        // vertical border-card
        &.k-vertical
            border-right none
            border-bottom $tabs-border

    // no-border-card
    &.k-no-border-card
        border-bottom none
        .k-tab
            border-color transparent
            background $tabs-no-border-card-bg-color 
            margin-right $tabs-no-border-card-gutter 
            &.k-active
                background #fff
                border-color transparent 
                &:after
                    display none
        // vertical
        &.k-vertical
            border-right none
            .k-tab
                margin-top $tabs-no-border-card-gutter

    // scroll
    &:not(.k-vertical)
        .k-scroll
            overflow hidden
            position relative
            // @referece https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
            padding-bottom 1px
            margin-bottom -1px
        &.k-border-card
        &.k-no-border-card
            .k-scroll
                padding-bottom 0
                margin-bottom 0
        .k-wrapper
            white-space nowrap
            float left
            transition transform $transition
        .k-prev
        .k-next
            position absolute
            top 0
            width $tabs-navigator-width
        .k-prev
            left 0
        .k-next
            right 0
        &.k-is-scroll
            padding 0 $tabs-navigator-width

    // size
    for size in sizes 
        &.k-{size}
            .k-tab
                font-size lookup('$tabs-' + size + '-font-size')
                height lookup('$tabs-' + size + '-height')
                line-height s('calc(%s - 2px)', @height)
                padding lookup('$tabs-' + size + '-padding')
                .k-close
                    if (lookup('$tabs-' + size + '-close-font-size') != null)
                        .k-icon
                            font-size lookup('$tabs-' + size + '-close-font-size')


require($theme-dir + '/tabs.styl')
